<template>
  <view class="login-container">
    <!-- 背景图层 -->
    <image class="bg-image" src="/static/images/doubao_icon/background.png" mode="aspectFill"></image>
    
    <!-- 半透明遮罩层 -->
    <view class="overlay"></view>
    
    <!-- 返回按钮 -->
    <view class="back-button" @tap="goBack">
      <image src="/static/images/doubao_icon/back_chat.png" mode="aspectFit" class="back-icon"></image>
    </view>
    
    <!-- 内容层 -->
    <view class="content-layer">
      <!-- 标题区域 -->
      <view class="login-title">
        <text class="main-title">AI旅行伴侣</text>
        <text class="subtitle-text">新如影旗下AI导游平台</text>
      </view>
      
      <!-- 表单区域 -->
      <view class="form-area">
        <view class="form-item">
          <input type="text" placeholder="账号" v-model="username" placeholder-class="input-placeholder" class="input-field" />
          <text v-if="errors.username" class="error-text">{{ errors.username }}</text>
        </view>
        
        <view class="form-item">
          <input type="password" placeholder="密码" v-model="password" placeholder-class="input-placeholder" class="input-field" />
          <text v-if="errors.password" class="error-text">{{ errors.password }}</text>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <view class="login-btn">
        <button @click="login" class="button" :disabled="loading">
          <text v-if="!loading">登录</text>
          <view v-else class="loading-container">
            <view class="loading-spinner"></view>
            <text class="loading-text">登录中...</text>
          </view>
        </button>
      </view>
    </view>

    <!-- 提示弹窗 -->
    <view class="toast" v-if="toast.show">
      <text>{{ toast.message }}</text>
    </view>
  </view>
</template>

<script>
export default {
  layout: 'empty',
  data() {
    return {
      username: 'admin',
      password: 'admin',
      loading: false,
      errors: {
        username: '',
        password: ''
      },
      toast: {
        show: false,
        message: ''
      }
    }
  },
  methods: {
    validateForm() {
      let isValid = true;
      this.errors = {
        username: '',
        password: ''
      };
      
      if (!this.username.trim()) {
        this.errors.username = '请输入账号';
        isValid = false;
      }
      
      if (!this.password.trim()) {
        this.errors.password = '请输入密码';
        isValid = false;
      }
      
      return isValid;
    },
    
    showToast(message, duration = 2000) {
      this.toast.message = message;
      this.toast.show = true;
      
      setTimeout(() => {
        this.toast.show = false;
      }, duration);
    },
    
    login() {
      // 表单验证
      if (!this.validateForm()) {
        return;
      }
      
      // 设置加载状态
      this.loading = true;
      
      // 模拟登录过程
      setTimeout(() => {
        // 模拟登录成功 - 为了测试方便，任何用户名密码都可以登录
        if (true) {
          this.showToast('登录成功');
          
          // 存储登录状态
          uni.setStorageSync('isLoggedIn', true);
          uni.setStorageSync('username', this.username);
          
          console.log('准备跳转到聊天页面');
          
          // 尝试使用不同的导航方法
          const that = this; // 保存this引用
          
          setTimeout(() => {
            // 尝试方法1：使用reLaunch
            uni.reLaunch({
              url: '/pages/chat/doubao_chat',
              success() {
                console.log('reLaunch跳转成功');
              },
              fail(err) {
                console.error('reLaunch跳转失败', err);
                
                // 尝试方法2：使用navigateTo
                uni.navigateTo({
                  url: '/pages/chat/doubao_chat',
                  success() {
                    console.log('navigateTo跳转成功');
                  },
                  fail(err) {
                    console.error('navigateTo跳转失败', err);
                    
                    // 尝试方法3：使用redirectTo
                    uni.redirectTo({
                      url: '/pages/chat/doubao_chat',
                      success() {
                        console.log('redirectTo跳转成功');
                      },
                      fail(err) {
                        console.error('redirectTo跳转失败', err);
                        
                        // 尝试方法4：使用原始的switchTab
                        uni.switchTab({
                          url: '/pages/chat/doubao_chat',
                          success() {
                            console.log('switchTab跳转成功');
                          },
                          fail(err) {
                            console.error('所有跳转方法都失败', err);
                            // 最后尝试返回上一页
                            that.goBack();
                          }
                        });
                      }
                    });
                  }
                });
              }
            });
          }, 1500);
        } else {
          // 模拟登录失败
          this.loading = false;
          this.showToast('账号或密码错误');
        }
      }, 1000); // 减少等待时间
    },
    
    goBack() {
      // 返回上一页
      console.log('执行返回事件');
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
          success() {
            console.log('返回成功');
          },
          fail(err) {
            console.error('返回失败', err);
            // 如果返回失败，尝试切换到首页
            uni.switchTab({
              url: '/pages/index/index'
            });
          }
        });
      }, 500);
    }
  }
}
</script>

<style>
page {
  height: 100%;
  width: 100%;
}

.login-container {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 背景图层 */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 半透明遮罩层 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 48, 73, 0.6); /* 深蓝色半透明遮罩 */
  z-index: 2;
}

/* 返回按钮样式 */
.back-button {
  position: absolute;
  top: 50px;
  left: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 24px;
  height: 24px;
}

/* 内容层 */
.content-layer {
  position: relative;
  z-index: 3;
  width: 85%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -100px; /* 整体上移100像素 */
}

/* 标题区域 */
.login-title {
  text-align: center;
  margin-bottom: 200px;
}

/* 主标题样式 */
.main-title {
  color: #ffffff;
  font-size: 54px;
  font-weight: 600;
  line-height: 70px;
  text-align: center;
  display: block;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 副标题样式 */
.subtitle-text {
  color: #ffffff;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  display: block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 输入框样式 */
.input-field {
  cursor: pointer;
  width: 296px;
  height: 48px;
  padding: 0px 8px;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  border-radius: 16px;
  background-color: rgba(255,255,255,0);
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  outline: none;
  text-align: center; /* 文字居中 */
}

/* 登录按钮样式 */
.button {
  cursor: pointer;
  width: 672px;
  height: 48px;
  padding: 0px 0px;
  border: 0;
  box-sizing: border-box;
  border-radius: 16px;
  background-color: #ffffff;
  color: #287294;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.input-placeholder {
  color: rgba(255,255,255,0.7);
  text-align: center; /* 占位符文字居中 */
}

/* 表单区域 */
.form-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-item {
  margin-bottom: 20px;
  width: 296px;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  line-height: 48px;
}

/* 错误提示文本 */
.error-text {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 5px;
  text-align: center;
}

/* 加载动画 */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(40, 114, 148, 0.3);
  border-radius: 50%;
  border-top-color: #287294;
  animation: spin 0.8s linear infinite;
  margin-right: 10px;
}

.loading-text {
  font-size: 14px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 提示弹窗 */
.toast {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 999;
  font-size: 14px;
}
</style>

